<template>
    <div class="wc-voteresult mint-header-pa">
        <mt-header fixed title="球队结果">
            <router-link to="/" slot="left">
                <mt-button class="iconfont">&#xe6b8;</mt-button>
            </router-link>
        </mt-header>
        <vue-scroll :pullDownRefresh="false" :pullUpLoad="false">
            <br/>
            <poprank style="color: #fff;"></poprank>
            <vue-line :isMargin="true"></vue-line>
            <fcresult ref="img"></fcresult>
            <vue-line :isMargin="true" v-if="isAllow"></vue-line>
            <mt-button type="danger" plain size="small" class="btn btn-white" @click="makeImage" v-if="isAllow">点击生成图片</mt-button>
            <br/>
        </vue-scroll>
        <div v-if="url" class="wc-img">
            <mt-header fixed title="长按图片保存">
                <div slot="left">
                    <mt-button icon="back" @click="handleClose($event)"></mt-button>
                </div>
            </mt-header>
            <img :src="url"/>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import util from '@/common/util'
import poprank from '@/components/poprank'
import fcresult from './components/forecastresult'
export default {
    components: {
        poprank,
        fcresult
    },
    data() {
        return {
            url: '',
            isAllow: ['oJEP8t03z5DrCC5X9ochRlh7i2DY','oJEP8t3lOErHAb1nHabl21PIJkJU'].indexOf(window.app.openId) > -1
        }
    },
    methods: {
        makeImage () {
            var html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></head><body>${this.$refs.img.$el.outerHTML}</body></html>`;
            var load = util.load('生成图片中');
            axios.post('https://worldcup.dmpb.com.cn/api/java/predict/getResultImage', {
                html: html
            }).then((res) => {
                this.url = res.data.data;
                load.close();
            })
        },
        handleClose (e) {
            e.stopPropagation();
            this.url = '';
        }
    }
}
</script>
<style lang="less" scoped>
    .wc-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        padding-top: 40px;
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .wc-voteresult {
        width: 100%;
        height: 100%;
        background-color: #2a3db0;
    }
    .btn-white {
        display: block;
        color: #fff;
        border-color: #fff;
        clear: both;
        margin: 0 auto;
    }
</style>
